<template>
  <h3>child1组件 - state</h3>
  <div>name: {{ name2 }}</div>
  <div>age: {{ age }}</div>
  <div>height: {{ height }}</div>
  <div>likes: {{ likes }}</div>
  <div>doubleCount: {{ doubleCount }}</div>
</template>

<script>
import { mapState } from "vuex";

export default {
  // vuex的数据不能用data去接受，会使响应式无效
  data() {
    return {
      // name: this.$store.state.name,
      like: "2.5",
      count: 10,
    };
  },

  // vuex的数据在组件里面只能用计算属性去接受
  // computed: {
  //   name2() {
  //     return this.$store.state.a.name;
  //   },
  //   age() {
  //     return this.$store.state.a.age;
  //   },
  //   height() {
  //     return this.$store.state.a.height;
  //   },
  //   likes() {
  //     return this.$store.state.a.likes;
  //   },
  // },

  // 可以使用mapState来简化代码
  // 可以使用数组的语法
  // computed: mapState(["name", "age", "height", "likes"]),

  // 还可以使用对象的语法,可以允许我们给变量取别名
  // 如果仓库分了模块，那么在获取数据的时候，state后面要加模块的名称
  computed: {
    // 如果要和组件原有的计算属性合并，要用扩展运算符
    ...mapState({
      // name2: "name",
      name2: (state) => state.a.name,
      // 函数可以对原有仓库的数据进行操作
      age: (state) => state.a.age + 1,
      height: "height",
      // likes: (state) => [...state.likes, this.like],
      // 如果再操作的时候，需要用到this，要写成普通函数
      likes(state) {
        console.log(state);
        return [...state.a.likes, this.like];
      },
    }),
    doubleCount() {
      return this.count * 2;
    },
  },
};
</script>
